<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锁定列</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->
<style type="text/css">
  
  #opp{
    position: absolute;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    top: 0;
    left: -120%;
    box-sizing:border-box;
    z-index: 999;
  }
  .opp_content{
    height: 40px;
    *height: 34px;
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    color: #667b8f;
    padding-top: 5px;
  }
  .opp_content span{
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: #3399FF;
    *float: left;
    *margin-top: 5px;
  }
  .opp_content .Division{
    width: 1px;
    height: 14px;
    background: #c9c9c9;
    display: inline-block;
    margin: 0 10px;
    *float: left;
    *margin-top: 5px;
  }
  .opp_content .close{
    width: 25px;
    height: 25px;
    float: right;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
    *margin-right: 20px;
  }
  .opp_content .l-icon{
    *float: left;
  }
</style>
</head>
<body>
  
    <div id="opp">
      <div class="opp_content">
        <div style="float: left;">当前选中项：</div><span></span>

        <a><div class="l-icon icon_delete" style="">批量删除</div></a>
        <div class="Division"></div>
        <a><div class="l-icon icon_import" style="">批量导出</div></a>
        <div class="Division"></div>
        <a><div class="l-icon icon_mark" style="">设为已读</div></a>
        <div class="Division"></div>
       <a><div class="l-icon icon_star" style="">收藏</div></a>
        <div class="close">X</div>
      </div>
    </div>

    
  <div class="page_content">
<div style="height:40px;">
  <table>
      <tr>
        <td width="50" class="ali03">院系:</td>
        <td><select id="dd">
          <option value="0">请选择</option>
          <option value="1">院系1</option>
          <option value="2">院系2</option>
          <option value="3">院系3</option>
        </select></td>
        <td width="100" class="ali03">关键词：</td>
        <td><input type="text" /></td>
        <td><button><span class="icon_find">查询</span></button></td>
      </tr>
    </table>
  </div>
    <div id="maingrid"></div>
    </div>
  <script type="text/javascript">
        var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
      {"deptName":"部门1","sex":"女","remark":"好啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":125,"degree":"硕士结业","age":20,"name":"员工1","deptId":12,"ability":1},
      {"deptName":"部门1","sex":"男","remark":"备注啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":124,"degree":"本科毕业","age":20,"name":"员工2","deptId":11,"ability":2},
    
      {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":123,"degree":"本科毕业","age":20,"name":"员工3","deptId":9,"ability":2},
      {"deptName":"部门1","sex":"女","remark":"不错啊","hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":121,"degree":"硕士肄业","age":20,"name":"员工4","deptId":8,"ability":3},
      {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":120,"degree":"博士肄业","age":20,"name":"员工5","deptId":7,"ability":4},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工6","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":118,"degree":"博士肄业","age":20,"name":"员工7","deptId":6,"ability":6},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":117,"degree":"博士肄业","age":20,"name":"员工8","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":116,"degree":"博士肄业","age":20,"name":"员工9","deptId":6,"ability":3},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":115,"degree":"博士肄业","age":20,"name":"员工10","deptId":6,"ability":1},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":114,"degree":"博士肄业","age":20,"name":"员工11","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":113,"degree":"博士肄业","age":20,"name":"员工12","deptId":6,"ability":5}
      ]}
       
       //数据表格使用
        var g;
    function initComplete(){
       g = $("#maingrid").quiGrid({
                columns: [ 
                  { display: '姓名', name: 'name', align: 'center',  width: "30%"},
                  { display: '性别', name: 'sex', align: 'center' , width: "20%"},
                  { display: '部门', name: 'deptName',  align: 'center' , width: "30%"},
                  { display: '学历', name: 'degree',  align: 'center', width: "20%" },
                  { display: '操作', isAllowHide: false, align: 'left', width: 180,
                        render: function (rowdata, rowindex, value, column){
                        return '<div class="grid_opp_container">'
                                   + '<span class="grid_opp_edit" onclick="onEdit(' + rowdata.id + ')">修改</span>' 
                                   + '<span class="grid_opp_delete" onclick="onDelete(' + rowdata.id+','+rowindex + ')">删除</span>'
                               + '</div>';
                     }
                }
                ], data:testData, pageSize: 10, rownumbers:true, checkbox:true,percentWidthMode:true,
                height: '100%', width:"100%",onCheckRow: checkRowHandler, onCheckAllRow: checkAllRowHandler
            });


    }
        function onView(rowid){
      top.Toast("showNoticeToast", "选择的记录Id是:" + rowid );
    }
    
    function onEdit(rowid){
      top.Toast("showNoticeToast", "选择的记录Id是:" + rowid );
      // for (var record in g.records){
      //   if(g.records[record]['id']==rowid){
      //     top.Toast("showNoticeToast", JSON.stringify(g.records[record]));
      //   }
      // }
    }
    
    function onDelete(rowid,rowidx){
      top.Toast("showNoticeToast", "删除的记录Id是:" + rowid );
    }

    function showCondition(num){
      if(num==0){
        $("#opp").stop().animate({
          left:"-100%"
        });
      }
      else{
        $("#opp").stop().animate({
          left:"0"
        });
        $("#opp").find('span').text(num);
      }
      
    }
    
    
    //点击X关闭
    $(".opp_content .close").click(function(){
      showCondition(0);
    });


    //将选中的行存入数组，并用isChecked方法在分页时进行选中项重置

        var checkedArray = [];


        function findCheckedArray(id)

        {

            for(var i =0;i<checkedArray.length;i++)

            {

                if(checkedArray[i] == id) return i;

            }

            return -1;

        }

        function addCheckedArray(id)

        {

            if(findCheckedArray(id) == -1){

              checkedArray.push(id);


            }

        }

        function removeCheckedArray(id)

        {

            var i = findCheckedArray(id);

            if(i==-1) return;

            checkedArray.splice(i,1);


        }



        function checkRowHandler(checked, data)

        {

            if (checked) addCheckedArray(data.id,data.name);

            else removeCheckedArray(data.id,data.name);

            showCondition(checkedArray.length)

        }

        function checkAllRowHandler(checked)

        {

            for (var rowid in this.records)

            {

                if(checked)

                    addCheckedArray(this.records[rowid]['id']);

                else

                    removeCheckedArray(this.records[rowid]['id']);

            }
             showCondition(checkedArray.length)

        }


    </script> 
</body>
</html>